<template>
  <div class="flex flex-wrap mb-6">
    <!-- <el-button plain v-for="item,index in classifyData" :key="index" class="m-3 hover:border-orange-400" >{{item['name']}}</el-button> -->
    <!-- <el-checkbox v-model="item['id']"  :label="item['name']" v-for="item,index in classifyData" :key="index" @change="handCheckBox(item['id'])"></el-checkbox> -->
    <span
      v-for="item in classifyData"
      :key="item['id']"
      class="box-border p-1 mt-3 mb-3 ml-5 mr-6 border-2 border-solid border-opacity-5 border-stone-800 hover:text-orange-400 hover:border-orange-400"
      @click="selectItemFn(item['id'])"
    >
      {{ item["name"] }}
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUpdated } from "vue";
import API from "../../../utils/axios";
import { getSelectMoviceId } from "../../../store/getSelectMoviceId";

const sendSelectMoviceStore = getSelectMoviceId();

export default defineComponent({
  name: "personal",

  setup(props, context) {
    // 测试mitt

    // 获取API中的分类数据
    const classifyData = ref([]);

    // 获取电影分类
    const getclassifyData = async () => {
      let res = await API({
        url: "/api/category",
        method: "get",
      });
      classifyData.value = res.data.data;
      // console.log("电影类型！",classifyData.value);
    };
    // 获取选中的分类id数组
    let seletId: any = ref();

    const selectItemFn = (arr: any) => {
      seletId = arr;
      console.log("获取选择的id", seletId);
      sendSelectMoviceStore.selectItemID = seletId
    };

    // 在东西挂载上去就去调用函数去拿数据
    onMounted(async () => {
      await getclassifyData();
    });
    onUpdated(() => {
      // sendSeletId
    });
    return {
      classifyData,
      selectItemFn,
      sendSelectMoviceStore,
    };
  },
});
</script>
